<template>
  <div class="virtual-lab-container">
    <h2 class="lab-title">焰色反应 (Flame Test)</h2>

    <div class="scene-wrapper">
      <div class="reagent-grid-container">
        <h4>选择样品</h4>
        <div class="reagent-grid">
          <div
            v-for="reagent in reagents"
            :key="reagent.id"
            class="reagent-item"
            :class="{ 
              'active': selectedReagent && selectedReagent.id === reagent.id,
              'disabled': experimentState !== 'idle' 
            }"
            @click="selectAndStartExperiment(reagent, $event)"
          >
            <div class="sample-icon" :class="reagent.id"></div>
            <span>{{ reagent.name }}</span>
          </div>
        </div>
      </div>

      <div class="experiment-scene" ref="sceneRef">
        
        <div class="platinum-loop-new" ref="loopRef" :style="loopStyle">
          <div v-if="sampleOnLoop" class="sample-on-tip" :class="sampleOnLoop"></div>
        </div>

        <div class="alcohol-lamp">
          <div class="lamp-body"></div>
          <div class="lamp-wick"></div>
          <div
            class="flame"
            ref="flameRef"
            :style="{ '--flame-color': flameColor, '--glow-color': flameGlow }"
          ></div>
        </div>
      </div>
    </div>

    <div class="info-panel">
      <p><strong>实验现象:</strong> {{ phenomenonText }}</p>
      <button @click="resetExperiment" :disabled="experimentState === 'idle'">
        重置实验
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// --- 状态与 Refs ---
const experimentState = ref('idle');
const phenomenonText = ref('请从左侧选择一种样品进行实验。');
const sceneRef = ref(null);
const loopRef = ref(null);
const flameRef = ref(null);

// --- 铂丝与样品控制 ---
const initialLoopStyle = { top: '80px', left: '120px', transform: 'rotate(0deg)' };
const loopStyle = reactive({ ...initialLoopStyle });
const selectedReagent = ref(null);
const sampleOnLoop = ref(null);

// --- 火焰控制 ---
const flameColor = ref('#87CEEB');
const flameGlow = ref('rgba(135, 206, 235, 0.5)');

// --- 数据 ---
const reagents = ref([
  { id: 'sodium', name: '氯化钠 (Na)' },
  { id: 'potassium', name: '氯化钾 (K)' },
  { id: 'copper', name: '氯化铜 (Cu)' },
  { id: 'strontium', name: '氯化锶 (Sr)' },
  { id: 'lithium', name: '氯化锂 (Li)' },
  { id: 'calcium', name: '氯化钙 (Ca)' },
]);
const flameData = {
  default: { color: '#87CEEB', glow: 'rgba(135, 206, 235, 0.5)' },
  sodium: { color: '#ffd700', glow: 'rgba(255, 215, 0, 0.7)', name: '黄色' },
  potassium: { color: '#da70d6', glow: 'rgba(218, 112, 214, 0.7)', name: '紫色' },
  copper: { color: '#2ecc71', glow: 'rgba(46, 204, 113, 0.7)', name: '绿色' },
  strontium: { color: '#e74c3c', glow: 'rgba(231, 76, 60, 0.7)', name: '洋红色' },
  lithium: { color: '#ff4b4b', glow: 'rgba(255, 75, 75, 0.7)', name: '红色' },
  calcium: { color: '#f39c12', glow: 'rgba(243, 156, 18, 0.7)', name: '砖红色' },
};

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function selectAndStartExperiment(reagent, event) {
  if (experimentState.value !== 'idle' || !sceneRef.value) return;

  experimentState.value = 'running';
  selectedReagent.value = reagent;

  const sceneRect = sceneRef.value.getBoundingClientRect();
  const targetRect = event.currentTarget.getBoundingClientRect();
  const tipOffset = 52; 

  // --- 1. 移动到样品位置 (不再旋转) ---
  phenomenonText.value = `正在移动到 ${reagent.name} ...`;
  const targetCenterX = targetRect.left - sceneRect.left + targetRect.width / 2;
  const targetCenterY = targetRect.top - sceneRect.top + targetRect.height / 2;

  Object.assign(loopStyle, {
    top: `${targetCenterY - 5}px`, 
    left: `${targetCenterX + tipOffset}px`, 
    transform: 'rotate(0deg)', // 关键：保持水平，不再旋转90度
  });
  await delay(1200);

  // --- 2. 模拟蘸取 ---
  phenomenonText.value = `成功蘸取 ${reagent.name}。`;
  sampleOnLoop.value = reagent.id;
  await delay(800);

  // --- 3. 移动到火焰上方 ---
  phenomenonText.value = '正移入火焰中进行灼烧...';
  const flameRect = flameRef.value.getBoundingClientRect();
  const flameCenterX = flameRect.left - sceneRect.left + flameRect.width / 2;
  const flameTopY = flameRect.top - sceneRect.top;

  Object.assign(loopStyle, {
    top: `${flameTopY}px`,
    left: `${flameCenterX + tipOffset}px`,
    transform: 'rotate(-15deg)', // 倾斜以进行灼烧
  });
  await delay(1500);

  // --- 4. 灼烧并显示颜色 ---
  const data = flameData[reagent.id];
  phenomenonText.value = `灼烧 ${reagent.name}，火焰呈现出独特的 ${data.name}。`;
  flameColor.value = data.color;
  flameGlow.value = data.glow;
  await delay(4000);

  // --- 5. 移出火焰并重置 ---
  phenomenonText.value = '反应结束，移出铂丝。';
  Object.assign(loopStyle, initialLoopStyle);
  flameColor.value = flameData.default.color;
  flameGlow.value = flameData.default.glow;
  sampleOnLoop.value = null;
  await delay(1000);
  
  phenomenonText.value = '实验结束。可选择新的样品重试。';
  selectedReagent.value = null;
  experimentState.value = 'idle';
}

function resetExperiment() {
  experimentState.value = 'idle';
  selectedReagent.value = null;
  sampleOnLoop.value = null;
  Object.assign(loopStyle, initialLoopStyle);
  flameColor.value = flameData.default.color;
  flameGlow.value = flameData.default.glow;
  phenomenonText.value = '请从左侧选择一种样品进行实验。';
}
</script>

<style scoped>
/* 样式部分无任何改动 */
.virtual-lab-container {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  background: #fdfdfd; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.lab-title { text-align: center; color: #334e68; margin-top: 0; margin-bottom: 20px; }
.scene-wrapper { display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-grow: 1; }
.reagent-grid-container {
  flex: 0 0 280px; padding: 15px; background-color: #f0f4f8; border-radius: 8px;
}
.reagent-grid-container h4 { margin-top: 0; text-align: center; color: #486581; margin-bottom: 15px; }
.reagent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reagent-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 5px; border-radius: 6px; cursor: pointer; border: 1px solid #d1d9e6;
  background-color: #fff; transition: all 0.3s ease; text-align: center;
}
.reagent-item:hover:not(.disabled) { border-color: #829ab1; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.reagent-item.active { background-color: #e0e6ed; border-color: #e74c3c; font-weight: bold; }
.reagent-item.disabled { cursor: not-allowed; opacity: 0.6; }
.reagent-item span { color: #334e68; font-size: 13px; margin-top: 8px;}
.sample-icon { width: 30px; height: 30px; border-radius: 50%; }
.experiment-scene { flex-grow: 1; position: relative; min-height: 450px; }

.platinum-loop-new {
  position: absolute;
  width: 140px; 
  height: 10px;
  z-index: 10;
  
  background-color: #829ab1;
  border-radius: 5px;

  transition: all 1.2s ease-in-out;
  
  transform-origin: right center;
}

.platinum-loop-new::before {
  content: '';
  position: absolute;
  left: -40px; 
  top: 50%;
  transform: translateY(-50%);
  width: 40px; 
  height: 2px;
  background-color: #bdc3c7;
}

.platinum-loop-new::after {
  content: '';
  position: absolute;
  left: -52px; 
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid #bdc3c7;
  border-radius: 50%;
  background-color: #f0f4f8;
}

.sample-on-tip {
  position: absolute;
  left: -52px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 11;
}

.sample-icon, .sample-on-tip { background-size: cover; border: 1px solid rgba(0,0,0,0.1); }
.sodium { background-image: radial-gradient(circle, #fff, #eee); }
.potassium { background-image: radial-gradient(circle, #fde8ff, #f5c8f8); }
.copper { background-image: radial-gradient(circle, #d4f8e5, #a3e9c3); }
.strontium { background-image: radial-gradient(circle, #ffdfe2, #ffb3b9); }
.lithium { background-image: radial-gradient(circle, #ffdfe2, #ff9a9a); }
.calcium { background-image: radial-gradient(circle, #ffefd5, #ffdab9); }

.alcohol-lamp { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.lamp-body { width: 120px; height: 90px; background-color: #e0e6ed; border-radius: 10px 10px 20px 20px; border: 3px solid #b0c4de; }
.lamp-wick { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 20px; height: 25px; background-color: #d1d9e6; border-radius: 5px 5px 0 0; }
.flame {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 80px; background-color: var(--flame-color);
  border-radius: 50% 50% 10% 10% / 80% 80% 20% 20%;
  transition: all 0.5s ease; animation: flicker 1.5s infinite alternate;
  box-shadow: 0 0 35px 18px var(--glow-color);
}
@keyframes flicker {
  0% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-52%) scale(1.05, 0.95); }
  100% { transform: translateX(-48%) scale(0.98, 1.02); }
}

.info-panel {
  margin-top: 20px; padding: 15px; text-align: center; background-color: #f0f4f8; border-radius: 8px;
}
.info-panel p { margin: 8px 0; color: #486581; min-height: 1.5em; line-height: 1.5em; }
.info-panel button { margin-top: 10px; padding: 10px 25px; border: none; border-radius: 6px; background-color: #e74c3c; color: white; cursor: pointer; transition: background-color 0.3s; }
.info-panel button:disabled { background-color: #a0a0a0; cursor: not-allowed; }
.info-panel button:hover:not(:disabled) { background-color: #c0392b; }
</style>